<template>
  <div class="add__info">
    <el-table :data="tableData" border>
      <el-table-column label="车场名称" prop="parkName" align="center"></el-table-column>
      <el-table-column label="泊链com_id" prop="bolianComId" align="center"></el-table-column>
      <el-table-column label="泊链park_id" prop="bolianParkId" align="center"></el-table-column>
      <el-table-column label="泊链union_id" prop="bolianParkUnionId" align="center"></el-table-column>
      <el-table-column label="变动类型" prop="updateType" align="center">
        <template slot-scope="scope">
          {{scope.row.updateType | filterType}}
        </template>
      </el-table-column>
      <el-table-column label="最后交易时间" width="152" align="center">
        <template slot-scope="scope">
          {{scope.row.lastPayTime | payTimeType}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="into(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="intoShow" width="1000px" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-table :data="intoData" border size="mini" @selection-change="handleSelectionChange">
        <el-table-column label="选择" type="selection" align="center" width="60px" />
        <el-table-column prop="fieldDesc" label="字段" align="center" width="160"></el-table-column>
        <el-table-column prop="oldValue" label="旧值" align="center" width="360"></el-table-column>
        <el-table-column prop="newValue" label="新值" align="center" width="360"></el-table-column>
      </el-table>
      <p style="color: red;" v-if="tipShow">请选择需要引入的字段!</p>
      <p style="text-align: center;">
        <el-button size="mini" @click="getUpdateNewDataField(1)">全部忽略</el-button>
        <el-button type="primary" size="mini" @click="getUpdateNewDataField(2)">引入</el-button>
      </p>
    </el-dialog>

    <el-dialog :visible.sync="addIntoShow" width="820px" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="addIntoForm" label-position="right" label-width="110px">
        <el-form-item label="com_id:">{{addIntoForm.bolianComId}}</el-form-item>
        <el-form-item label="park_id:">{{addIntoForm.bolianParkId}}</el-form-item>
        <el-form-item label="union_id:">{{addIntoForm.bolianParkUnionId}}</el-form-item>
        <el-form-item label="车场名称:">{{addIntoForm.parkName}}</el-form-item>
        <el-form-item label="车场地址:">{{addIntoForm.parkAddress}}</el-form-item>
        <el-form-item label="联系电话:">{{addIntoForm.telephone}}</el-form-item>
        <el-form-item label="总车位数:">{{addIntoForm.totalParkSpace}}</el-form-item>
        <el-form-item label="空车位数:">{{addIntoForm.emptyParkSpace}}</el-form-item>
        <el-form-item label="价格描述:">{{addIntoForm.priceDesc}}</el-form-item>
        <el-form-item label="车场经度:">{{addIntoForm.longitude}}</el-form-item>
        <el-form-item label="车场纬度:">{{addIntoForm.latitude}}</el-form-item>
        <el-form-item label="最后交易时间:">{{addIntoForm.lastPayTime | payTimeType}}</el-form-item>
        <el-form-item label="单日费用限额:">{{addIntoForm.dailyFeeLimit}}</el-form-item>
      </el-form>
      <p style="text-align: center;">
        <el-button size="mini" @click="getUpdateNewDataField(1)">忽略</el-button>
        <el-button size="mini" type="danger" @click="addInfo">引入</el-button>
      </p>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    filters: {
      filterType(type) {
        if(type == 1) {
          return '属性内容'
        } else if(type == 2) {
          return '已不存在'
        } else {
          return '新添加'
        }
      },
      payTimeType(time) {
        return time == null ? '无' : time;
      }
    },
    data() {
      return {
        tableData: [],
        intoShow: false,
        intoData: [],
        intoForm: [],
        comId: null,
        tipShow: false,
        addIntoShow: false,
        addIntoForm: {}
      }
    },
    mounted() {
      this.getPendingBolianPark();
    },
    methods: {
      getPendingBolianPark() {
        this.$axios({
          method: 'get',
          url: '/park/bolian-pull/getPendingBolianPark'
        }).then((res) => {
          this.tableData = res.data;
        })
      },

      into(row) {
        if(row.updateType == 1) {
          this.intoShow = true;
          this.getFieldFromBolian(row);
        } else {
          this.addIntoShow =true;
          this.addIntoForm = row;
          this.getFieldFromBolian(row);
        }
      },

      getFieldFromBolian(row) {
        this.$axios({
          method: 'post',
          url: '/park/bolian-pull/quoteFieldFromBolian',
          data: this.$qs.stringify({updateField: row.updateField})
        }).then(res => {
          if(res.code == 200) {
            this.intoData = res.data;
            this.comId = row.bolianComId;
          }
        })
      },

      handleSelectionChange(val) {
        this.intoForm = val;
      },

      getUpdateNewDataField(status) {
        let title = status == 1 ? '此操作将删除该记录, 是否继续?' : '确定要引入此条数据吗？';
        this.$confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let form = {};
          form.status = status;
          form.bolianComId = this.comId;
          form.bolianPullList = this.intoForm;
          this.tipShow = false;
          this.$axios({
            method: 'post',
            url: '/park/bolian-pull/updateNewDataField',
            data: form
          }).then((res) => {
            if(res.code == 200) {
              this.intoShow = false;
              this.addIntoShow = false;
              this.$message.success('审核成功');
              this.getPendingBolianPark();
            } else {
              this.$message.warning(res.desc);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },

      addInfo() {
        if(this.addIntoForm.parkAddress != null && this.addIntoForm.parkAddress != '') {
          if(this.addIntoForm.latitude > 3.86 && this.addIntoForm.latitude < 53.55 && this.addIntoForm.longitude > 73.66 && this.addIntoForm.longitude < 135.05) {
            this.$confirm('确定引入该数据吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios({
                method: 'post',
                url: '/park/park-info/addParkInfo',
                data: this.addIntoForm
              }).then((res) => {
                if(res.code == 200) {
                  this.addIntoShow = false;
                  this.$message.success('审核成功');
                  this.getPendingBolianPark();
                } else {
                  this.$message.waring(res.desc);
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              });
            });
          } else {
            this.$message.warning('停车场经纬度不正确')
          }
        } else {
          this.$message.warning('停车场地址不能为空')
        }
      }


    }
  }
</script>

<style scoped>
  .el-form {
    border: 3px solid #aaa;
  }

  .el-form-item {
    width: 250px;
    margin: 0;
  }




</style>
